<template>
  <div class="app-container">
    <!-- 加载状态 -->
    <div v-if="authStore.isLoading && !authStore.user" class="loading-container">
      <el-icon class="is-loading" size="32">
        <Loading />
      </el-icon>
      <p class="loading-text">初始化中...</p>
    </div>

    <!-- 主应用内容 -->
    <div v-else class="main-content">
      <!-- 顶部导航栏 -->
      <div v-if="authStore.isAuthenticated" class="top-nav">
        <div class="nav-left">
          <h1 class="app-title">📝 Web Notes</h1>
        </div>
        <div class="nav-right">
          <span class="user-info">
            <el-icon><User /></el-icon>
            {{ authStore.user?.username }}
          </span>
          <el-button 
            @click="handleLogout" 
            size="small" 
            type="danger"
            :icon="SwitchButton"
          >
            退出登录
          </el-button>
        </div>
      </div>
      
      <!-- 路由视图 -->
      <div class="content-area">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Loading, User, SwitchButton } from '@element-plus/icons-vue'
import { useAuthStore } from './stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const handleLogout = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要退出登录吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    authStore.logout()
    ElMessage.success('已退出登录')
    router.push('/auth')
  } catch {
    // 用户取消操作
  }
}

// 设置应用标题
document.title = import.meta.env.VITE_APP_TITLE || 'Web Notes'
</script>

<style>
/* 全局样式重置 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #f5f7fa;
  color: #303133;
  line-height: 1.6;
}

#app {
  height: 100vh;
}

.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  z-index: 9999;
}

.loading-text {
  margin-top: 16px;
  color: #909399;
  font-size: 14px;
}

.main-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.top-nav {
  background: white;
  padding: 12px 24px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-left {
  display: flex;
  align-items: center;
}

.app-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #409eff;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #606266;
  font-size: 14px;
}

.content-area {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .top-nav {
    padding: 10px 16px;
  }
  
  .app-title {
    font-size: 18px;
  }
  
  .nav-right {
    gap: 12px;
  }
  
  .user-info {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .top-nav {
    padding: 8px 12px;
  }
  
  .app-title {
    font-size: 16px;
  }
  
  .nav-right {
    gap: 8px;
  }
  
  .user-info span {
    display: none; /* 在小屏幕上隐藏用户名文字 */
  }
}
</style>
